﻿<?xml version="1.0" encoding="UTF-8" ?>
<!-- 
    This file is part of Microsoft Robotics Developer Studio Code Samples.
    Copyright (C) Microsoft Corporation.  All rights reserved.
    $File: Gyro.xslt $ $Revision: 1 $
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:c="http://schemas.microsoft.com/robotics/2009/12/hitechnic/nxt/gyrosensor.html">
  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:call-template name="MasterPage">
      <xsl:with-param name="title">
        <xsl:text>HiTechnic Gyro Sensor - </xsl:text>
        <xsl:value-of select="/c:GyroSensorState/c:Name"/>
      </xsl:with-param>
      <xsl:with-param name="serviceName">
        HiTechnic Gyro Sensor
      </xsl:with-param>
      <xsl:with-param name="description">
        Status of a HiTechnic Gyro Sensor.
      </xsl:with-param>
      <xsl:with-param name="head">
        <script language="javascript" type="text/javascript" src="/resources/HiTechnicSensors.Y2009.M12/Microsoft.Robotics.Services.Sample.HiTechnic.Transforms.Common.js"/>
        <script language="javascript" type="text/javascript">
          <xsl:text>
var pollingFrequency = </xsl:text>
          <xsl:value-of select="/c:GyroSensorState/c:PollingFrequencyMs"/>
          <xsl:text>;
var timeStamp = "</xsl:text>
          <xsl:value-of select="/c:GyroSensorState/c:TimeStamp"/>
          <xsl:text>";
var offset = </xsl:text>
          <xsl:value-of select="/c:GyroSensorState/c:Offset"/>
          <xsl:text>;</xsl:text>
          <xsl:text>var rotationSpeed = </xsl:text>
          <xsl:value-of select="/c:GyroSensorState/c:RotationSpeed"/>
          <xsl:text>;</xsl:text>

          <![CDATA[

function onState(state)
{
    if (state.TimeStamp != timeStamp)
    {
      timeStamp = state.TimeStamp;
      var ts = document.getElementById("TimeStamp");
      if (ts != null)
        ts.innerText = state.TimeStamp;

      var rot = document.all("RotationSpeed");
      if (rot != null)
        rot.innerText = state.RotationSpeed;

      if (rotationSpeed != parseFloat(state.RotationSpeed))
      {
        rotationSpeed = parseFloat(state.RotationSpeed);
        setNewTarget(rotationSpeed);
      }
    }
    readState(pollingFrequency);
}

function startPolling()
{
  setStateCompletion("onState");
  readState(pollingFrequency);
}

setTimeout("startPolling()", 1000);

var current = 0;
var target = 0;
var turning = false;

function setNewTarget(angle)
{
    target = clip(parseFloat(angle)) / 2.0;
    
    if (!turning)
    {
        turning = true;
        setTimeout("setRotation()", 25);
    }
}

function clip(value)
{
    return value;
}

function setRotation()
{
    var delta = clip(target - current);
    
    if (delta > 45)
    {
        delta = 45;
    }
    else if (delta < -45)
    {
        delta = -45;
    }
    else if (delta == 0)
    {
        turning = false;
        return;
    }
    
    current = clip(current + delta);

    var angle = current;    
    
    var gyro = document.all("Gyro");
    var filter = gyro.filters[0];
    
    // Note: Use +ve angle, because gyro is positive clockwise
    var radians = angle * Math.PI / 180;
    var cosTheta = Math.cos(radians);
    var sinTheta = Math.sin(radians);
    
    filter.M11 = cosTheta;
    filter.M12 = -sinTheta;
    filter.M21 = sinTheta;
    filter.M22 = cosTheta;
    
    //debugger
    
    filter.Dx = 64 * (1 - cosTheta + sinTheta);
    filter.Dy = 64 * (1 - cosTheta - sinTheta);
    
    setTimeout("setRotation()", 25);
}    

          ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <!--<xsl:output method="html"/>-->

  <xsl:template match="/c:GyroSensorState">
    <img src="/resources/HiTechnicSensors.Y2009.M12/Microsoft.Robotics.Services.Sample.HiTechnic.Resources.HiTechnicGyroSensor.Image.png"
         align="right" alt="Buttons" width="32px" height="32px"/>
    <table>
      <tr class="even">
        <th width="30%">Name:</th>
        <td width="70%">
          <xsl:value-of select="c:Name"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Connection:</th>
        <td>
          <xsl:choose>
            <xsl:when test="c:Connected = 'true'">
              Connected
            </xsl:when>
            <xsl:otherwise>
              Not connected
            </xsl:otherwise>
          </xsl:choose>
          <xsl:text> on </xsl:text>
          <xsl:value-of select="c:SensorPort"/>
        </td>
        <tr class="even">
          <th>Polling Frequency:</th>
          <td id="PollingFrequencyMs">
            <xsl:value-of select="c:PollingFrequencyMs"/>
          </td>
        </tr>
      </tr>
      <tr class="odd">
        <th>Offset:</th>
        <td id="Offset">
          <xsl:value-of select="c:Offset"/>
        </td>
      </tr>
      <tr class="even">
        <th>Rotation Speed:</th>
        <td id="RotationSpeed">
          <xsl:value-of select="c:RotationSpeed"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Timestamp:</th>
        <td id="TimeStamp">
          <xsl:value-of select="c:TimeStamp"/>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div style="width:128px;height:128px;background:white;">
            <div id="Gyro" style="width:128px;height:128px;filter:progid:DXImageTransform.Microsoft.Matrix(FilterType='nearest neighbor');">
              <img src="/resources/HiTechnicSensors.Y2009.M12/Microsoft.Robotics.Services.Sample.HiTechnic.Resources.GyroDiag.png"
                   width="128px" height="128px"
                   onload="setNewTarget({c:RotationSpeed});"/>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <br/>
    Gyro values range from -360 to +360 degrees/second. However, the values change rapidly
    so you might have difficulty in seeing them.
    <br/>
  </xsl:template>
</xsl:stylesheet>